<template>
  <div class="form_layout">
    <div class="header">
      <div class="header-container">
        <div class="container">
          <!-- logo -->
          <div class="items">
            <div>
              <img @click="toMainPage" class="logo" src="@/assets/logo.png" />
            </div>
          </div>
          <div class="split">

          </div>
          <div class="layout-title">{{ $route.meta.title }}</div>
        </div>
        <div>
        </div>
      </div>
    </div>
    <div class="view">
      <router-view v-if="isLoadOver"></router-view>
    </div>
  </div>
</template>

<script setup>
import { reactive,ref } from "vue";
import { useRouter } from "vue-router";

const isLoadOver = ref(true);
const Router = useRouter();

// 跳转登录页面
const toMainPage = () => {
  Router.push("/");
}

</script>

<style lang='scss' scoped>
.form_layout {
  width: 100%;
  height: calc(100% - 64px);
  // min-width: 1440px;
  
  justify-content: center; /* 水平居中 */
}
.header {
  height: 64px;
  background-color: #fff;
  z-index: 2000;
  box-shadow: 0px 2px 4px 0px rgba(220, 223, 230, 0.5);
  position: relative;
  align-items: center;
  display: flex;
  .header-container {
    min-width: 1300px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center; /* 垂直居中 */
  }
  .container {
    height: 100%;
    display: flex;
    align-items: center; /* 垂直居中 */

  }

  .login-btn {
    cursor: pointer;
  }
}
.view {
  margin: 0 auto;
  margin-top: 32px;
  width: 1184px;
}

.items {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 100%;
}
.system-name {
  margin-left: 16px;
  margin-right: 10px;
  height: 50px;
  line-height: 50px;
  color: #3c4144;
  cursor: pointer;
  border-bottom: 2px solid #fff;
  font-size: 17px;
  font-weight: 700;
}
.split{
  border-left: 1px solid #303133;
  height: 16px;
}
.layout-title {

  font-family: PingFangSC-Medium, PingFang SC;
  padding-left: 16px;
  font-size: 16px;
  font-weight: 500;
  color: #3C4144;
  line-height: 22px;
  height: 22px;
}

::v-deep(.main-menu-tab) {
  .el-tabs__header {
    margin: 0px;
  }
  .el-tabs__nav-wrap::after {
    height: 0px;
  }
  .el-tabs__item {
    font-size: 16px;
    height: 47px;
    font-weight: 500;
  }
}
.login-group {
  width: 400px;
  text-align: right;
  .login-btn {
    font-size: 30px;
    cursor: pointer;
    color: #606266;
  }
}
.logo {
  cursor: pointer;
  height:32px;
}
</style>